Frontend MediaStream Track: Põhjalik Juhend Meediaradade Haldamiseks

Liides MediaStreamTrack esindab ühte meediarada MediaStream'i sees. See rada võib sisaldada kas heli või videot. Nende radade haldamise mõistmine on veebis vastupidavate ja interaktiivsete meediarakenduste loomisel ülioluline. See põhjalik juhend tutvustab teile MediaStream Trackide loomist, manipuleerimist ja haldamist frontend-arenduses.

Mis on MediaStream Track?

MediaStream on meediasisu voog, mis võib sisaldada mitut MediaStreamTrack objekti. Iga rada esindab ühte heli- või videoallikat. Mõelge sellest kui konteinerist, mis hoiab ühte heli- või videoandmete voogu.

Põhilised Omadused ja Meetodid

• kind: Kirjutuskaitstud string, mis näitab raja tüüpi ("audio" või "video").
• id: Kirjutuskaitstud string, mis esindab raja unikaalset identifikaatorit.
• label: Kirjutuskaitstud string, mis pakub rajale inimloetavat silti.
• enabled: Tõeväärtus, mis näitab, kas rada on hetkel sisse lülitatud. Selle väärtuseks false seadmine vaigistab või keelab raja ilma seda peatamata.
• muted: Kirjutuskaitstud tõeväärtus, mis näitab, kas rada on vaigistatud süsteemitaseme piirangute või kasutajaseadete tõttu.
• readyState: Kirjutuskaitstud string, mis näitab raja hetkeseisundit ("live", "ended").
• getSettings(): Tagastab sõnastiku raja praeguste seadetega.
• getConstraints(): Tagastab sõnastiku piirangutega, mis rajale selle loomisel rakendati.
• applyConstraints(constraints): Üritab rajale rakendada uusi piiranguid.
• clone(): Tagastab uue MediaStreamTrack objekti, mis on originaali kloon.
• stop(): Peatab raja, lõpetades meediaandmete voo.
• addEventListener(): Võimaldab teil kuulata rajal toimuvaid sündmusi, nagu ended või mute.

MediaStream Trackide Hankimine

The primary way to obtain MediaStreamTrack objects is through the getUserMedia() API. This API prompts the user for permission to access their camera and microphone, and if granted, returns a MediaStream containing the requested tracks.

getUserMedia() Kasutamine

Siin on põhiline näide, kuidas kasutada getUserMedia() kasutaja kaamerale ja mikrofonile juurdepääsemiseks:

navigator.mediaDevices.getUserMedia({ video: true, audio: true })
  .then(function(stream) {
    // Kasuta voogu siin.
    const videoTrack = stream.getVideoTracks()[0];
    const audioTrack = stream.getAudioTracks()[0];

    // Näide: Kuvage video videoelemendis
    const videoElement = document.getElementById('myVideo');
    videoElement.srcObject = stream;
    videoElement.play();
  })
  .catch(function(err) {
    console.log("Tekkis viga: " + err);
  });

Selgitus:

• navigator.mediaDevices.getUserMedia({ video: true, audio: true }): See taotleb juurdepääsu nii video- kui ka helisisenditele. Objekt, mis edastatakse getUserMedia'le, määratleb soovitud meediumitüübid.
• .then(function(stream) { ... }): See käivitatakse, kui kasutaja annab loa ja MediaStream on edukalt hangitud.
• stream.getVideoTracks()[0]: See hangib voost esimese videoraja. Voog võib sisaldada mitut sama tüüpi rada.
• stream.getAudioTracks()[0]: See hangib voost esimese heliraja.
• videoElement.srcObject = stream: See seab videoelemendi srcObject atribuudi väärtuseks MediaStream, mis võimaldab videot kuvada.
• videoElement.play(): Alustab video taasesitust.
• .catch(function(err) { ... }): See käivitatakse vea ilmnemisel, näiteks kui kasutaja keeldub loast.

Piirangud

Piirangud võimaldavad teil määrata nõudeid meediaradadele, näiteks eraldusvõime, kaadrisagedus ja helikvaliteet. See on oluline tagamaks, et teie rakendus saaks meediaandmeid, mis vastavad selle spetsiifilistele vajadustele. Piiranguid saab määrata getUserMedia() kutse sees.

navigator.mediaDevices.getUserMedia({
  video: {
    width: { min: 640, ideal: 1280, max: 1920 },
    height: { min: 480, ideal: 720, max: 1080 },
    frameRate: { ideal: 30, max: 60 }
  },
  audio: {
    echoCancellation: { exact: true },
    noiseSuppression: { exact: true }
  }
})
.then(function(stream) {
  // ...
})
.catch(function(err) {
  console.log("Tekkis viga: " + err);
});

Selgitus:

• width: { min: 640, ideal: 1280, max: 1920 }: See määrab, et video laius peaks olema vähemalt 640 pikslit, ideaalis 1280 pikslit ja mitte rohkem kui 1920 pikslit. Brauser proovib leida kaamera, mis toetab neid piiranguid.
• height: { min: 480, ideal: 720, max: 1080 }: Sarnaselt laiusega määratleb see video soovitud kõrguse.
• frameRate: { ideal: 30, max: 60 }: See taotleb kaadrisagedust ideaalis 30 kaadrit sekundis ja mitte rohkem kui 60 kaadrit sekundis.
• echoCancellation: { exact: true }: See taotleb, et helirajal oleks kajasummutus sisse lülitatud. exact: true tähendab, et brauser *peab* pakkuma kajasummutust, vastasel juhul taotlus ebaõnnestub.
• noiseSuppression: { exact: true }: See taotleb, et helirajal oleks mürasummutus sisse lülitatud.

Oluline on märkida, et brauser ei pruugi suuta kõiki piiranguid täita. Saate kasutada getSettings() meetodit MediaStreamTrack'il, et teha kindlaks tegelikud seaded, mis rakendati.

MediaStream Trackide Manipuleerimine

Kui olete MediaStreamTrack'i hankinud, saate seda heli- ja videoväljundi juhtimiseks mitmel viisil manipuleerida.

Radade Sisse- ja Väljalülitamine

Rada saab sisse või välja lülitada atribuudi enabled abil. Väärtuse enabled seadmine false'iks vaigistab heliraja või lülitab videoraja välja ilma seda peatamata. Selle tagasi true'ks seadmine lülitab raja uuesti sisse.

const videoTrack = stream.getVideoTracks()[0];

// Lülita videorada välja
videoTrack.enabled = false;

// Lülita videorada sisse
videoTrack.enabled = true;

See on kasulik funktsioonide, nagu vaigistusnupud ja video lülitid, implementeerimiseks.

Piirangute Rakendamine Pärast Loomist

Meetodit applyConstraints() saab kasutada raja piirangute muutmiseks pärast selle loomist. See võimaldab teil dünaamiliselt kohandada heli- ja videoseadeid vastavalt kasutaja eelistustele või võrgutingimustele. Mõned piirangud ei pruugi aga pärast raja loomist muudetavad olla. applyConstraints() edukus sõltub aluseks oleva riistvara võimekusest ja raja hetkeseisundist.

const videoTrack = stream.getVideoTracks()[0];

videoTrack.applyConstraints({ frameRate: { ideal: 24 } })
  .then(function() {
    console.log("Piirangud on edukalt rakendatud.");
  })
  .catch(function(err) {
    console.log("Piirangute rakendamine ebaõnnestus: " + err);
  });

Radade Peatamine

Raja täielikuks peatamiseks ja aluseks olevate ressursside vabastamiseks saate kasutada meetodit stop(). See on oluline kaamera ja mikrofoni vabastamiseks, kui neid enam ei vajata, eriti piiratud ressurssidega keskkondades nagu mobiilseadmed. Kui rada on peatatud, ei saa seda uuesti käivitada. Peate hankima uue raja, kasutades getUserMedia().

const videoTrack = stream.getVideoTracks()[0];

// Peata rada
videoTrack.stop();

Hea tava on peatada ka kogu MediaStream, kui olete sellega lõpetanud:

stream.getTracks().forEach(track => track.stop());

Täiustatud Tehnikad

Lisaks põhitõdedele on olemas mitmeid täiustatud tehnikaid, mida saate kasutada MediaStreamTrack objektide edasiseks manipuleerimiseks ja täiustamiseks.

Radade Kloonimine

Meetod clone() loob uue MediaStreamTrack objekti, mis on originaali koopia. Kloonitud rada jagab sama aluseks olevat meediaallikat. See on kasulik, kui peate kasutama sama meediaallikat mitmes kohas, näiteks sama video kuvamiseks mitmes videoelemendis.

const originalTrack = stream.getVideoTracks()[0];
const clonedTrack = originalTrack.clone();

// Loo uus MediaStream kloonitud rajaga
const clonedStream = new MediaStream([clonedTrack]);

// Kuva kloonitud voog teises videoelemendis
const videoElement2 = document.getElementById('myVideo2');
videoElement2.srcObject = clonedStream;
videoElement2.play();

Pange tähele, et originaalraja peatamine peatab ka kloonitud raja, kuna need jagavad sama aluseks olevat meediaallikat.

Heli ja Video Töötlemine

Liides MediaStreamTrack ise ei paku otseseid meetodeid heli- või videoandmete töötlemiseks. Selle saavutamiseks saate aga kasutada teisi veebi API-sid, näiteks Web Audio API ja Canvas API.

Helitöötlus Web Audio API-ga

Saate kasutada Web Audio API-d MediaStreamTrack'ist pärinevate heliandmete analüüsimiseks ja manipuleerimiseks. See võimaldab teil teostada selliseid ülesandeid nagu heli visualiseerimine, müra vähendamine ja heliefektide lisamine.

const audioContext = new AudioContext();
const source = audioContext.createMediaStreamSource(stream);

// Loo analüsaatori sõlm heliandmete eraldamiseks
const analyser = audioContext.createAnalyser();
analyser.fftSize = 2048;
const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);

// Ühenda allikas analüsaatoriga
source.connect(analyser);
analyser.connect(audioContext.destination);

function draw() {
  requestAnimationFrame(draw);

  // Hangi sagedusandmed
  analyser.getByteFrequencyData(dataArray);

  // Kasuta dataArray'd heli visualiseerimiseks
  // (nt joonista lõuendile sagedusspekter)
  console.log(dataArray);
}

draw();

Selgitus:

• new AudioContext(): Loob uue Web Audio API konteksti.
• audioContext.createMediaStreamSource(stream): Loob MediaStream'ist heliallika sõlme.
• audioContext.createAnalyser(): Loob analüsaatori sõlme, mida saab kasutada heliandmete eraldamiseks.
• analyser.fftSize = 2048: Määrab Kiire Fourier' teisenduse (FFT) suuruse, mis määrab sagedusalade arvu.
• analyser.getByteFrequencyData(dataArray): Täidab dataArray sagedusandmetega.
• Funktsiooni draw() kutsutakse korduvalt, kasutades requestAnimationFrame(), et heli visualiseerimist pidevalt uuendada.

Videotöötlus Canvas API-ga

Saate kasutada Canvas API-d MediaStreamTrack'ist pärinevate videokaadrite manipuleerimiseks. See võimaldab teil teostada selliseid ülesandeid nagu filtrite rakendamine, ülekatete lisamine ja reaalajas videoanalüüsi teostamine.

const videoElement = document.getElementById('myVideo');
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

function drawFrame() {
  requestAnimationFrame(drawFrame);

  // Joonista praegune videokaader lõuendile
  ctx.drawImage(videoElement, 0, 0, canvas.width, canvas.height);

  // Manipuleeri lõuendi andmeid (nt rakenda filter)
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  const data = imageData.data;

  for (let i = 0; i < data.length; i += 4) {
    // Rakenda lihtne halltoonides filter
    const avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
    data[i] = avg;       // punane
    data[i + 1] = avg;   // roheline
    data[i + 2] = avg;   // sinine
  }

  // Aseta muudetud andmed lõuendile tagasi
  ctx.putImageData(imageData, 0, 0);
}

videoElement.addEventListener('play', drawFrame);

Selgitus:

• Funktsiooni drawFrame() kutsutakse korduvalt, kasutades requestAnimationFrame(), et lõuendit pidevalt uuendada.
• ctx.drawImage(videoElement, 0, 0, canvas.width, canvas.height): Joonistab praeguse videokaadri lõuendile.
• ctx.getImageData(0, 0, canvas.width, canvas.height): Hangib pildiandmed lõuendilt.
• Kood itereerib läbi piksliandmete ja rakendab halltoonides filtri.
• ctx.putImageData(imageData, 0, 0): Asetab muudetud pildiandmed lõuendile tagasi.

MediaStream Trackide Kasutamine WebRTC-ga

MediaStreamTrack objektid on WebRTC (Web Real-Time Communication) aluseks, mis võimaldab reaalajas heli- ja videosuhtlust otse brauserite vahel. Saate lisada MediaStreamTrack objekte WebRTC RTCPeerConnection'ile, et saata heli- ja videoandmeid kaugele partnerile.

const peerConnection = new RTCPeerConnection();

// Lisa heli- ja videorajad partnerühendusele
stream.getTracks().forEach(track => {
  peerConnection.addTrack(track, stream);
});

// Ülejäänud WebRTC signaalimise ja ühenduse loomise protsess järgneks siin.

See võimaldab teil luua videokonverentsirakendusi, otseülekande platvorme ja muid reaalajas suhtlusvahendeid.

Brauseri Ühilduvus

MediaStreamTrack API on laialdaselt toetatud kaasaegsete brauserite poolt, sealhulgas Chrome, Firefox, Safari ja Edge. Siiski on alati hea mõte kontrollida uusimat brauseri ühilduvusteavet ressurssidest nagu MDN Web Docs.

Parimad Praktikad

• Käsitsege Lubasid Hoolikalt: Käsitsege kasutaja lube kaamerale ja mikrofonile juurdepääsuks alati taktitundeliselt. Selgitage selgelt, miks teie rakendus neile seadmetele juurdepääsu vajab.
• Peatage Rajad, Kui Neid Ei Vajata: Vabastage kaamera ja mikrofoni ressursid, peatades rajad, kui neid enam ei kasutata.
• Optimeerige Piiranguid: Kasutage piiranguid, et taotleda oma rakenduse jaoks optimaalseid meediaseadeid. Vältige liiga kõrgete eraldusvõimete või kaadrisageduste taotlemist, kui need pole vajalikud.
• Jälgige Raja Seisundit: Kuulake sündmusi nagu ended ja mute, et reageerida raja seisundi muutustele.
• Testige Erinevatel Seadmetel: Testige oma rakendust erinevatel seadmetel ja brauserites, et tagada ühilduvus.
• Arvestage Juurdepääsetavusega: Kujundage oma rakendus nii, et see oleks ligipääsetav puuetega kasutajatele. Pakkuge alternatiivseid sisestusmeetodeid ja veenduge, et heli- ja videoväljund oleks selge ja arusaadav.

Kokkuvõte

Liides MediaStreamTrack on võimas tööriist meediarikaste veebirakenduste loomiseks. Mõistes, kuidas meediaradasid luua, manipuleerida ja hallata, saate luua oma kasutajatele kaasahaaravaid ja interaktiivseid kogemusi. See põhjalik juhend on käsitlenud MediaStreamTrack'i haldamise olulisi aspekte, alates radade hankimisest getUserMedia() abil kuni täiustatud tehnikateni nagu heli- ja videotöötlus. Pidage meeles, et meediavoogudega töötamisel on esmatähtis kasutajate privaatsus ja jõudluse optimeerimine. WebRTC ja sellega seotud tehnoloogiate edasine uurimine laiendab oluliselt teie võimekust selles põnevas veebiarenduse valdkonnas.